function darw(data,graphWidth,graphHeight){
  
   let axisLengthX = graphWidth * 0.8
   let axisLengthY = graphHeight * 0.8
   let strokeWidth = 3;

   let colWidth = Math.round(axisLengthX/(data.length*2)*1.4)
   let spaceWidth = colWidth / 3

   let colColor = ["#60acfc","#32d3eb","#5bc49f","#feb64d","#ff7c7c","#9287e7","#60acfc","#32d3eb","#5bc49f","#feb64d","#ff7c7c","#9287e7"]
   let axisColorX = "#cdaa7d"
   let axisColorY = '#b7b7b7'
   
   //获取最大的销售额   
   let maxNum = 0;
   for(let i = 0;i<data.length;i++){
      if(data[i] >maxNum){
          maxNum = data[i]
      }
   }
   //计算对应的柱状图高度 
   let colHeight = []
   for(let i = 0;i<data.length;i++){
    colHeight.push(Math.round(data[i]/maxNum * axisLengthY))
   }  
  //绘制
  let svg = document.getElementById('svg-graph')
  let xmlns = "http://www.w3.org/2000/svg"
  
  //图形区域   
  let backRect = document.createElementNS(xmlns,'rect')
  backRect.setAttribute('width',graphWidth)
  backRect.setAttribute('height',graphHeight)
  backRect.setAttribute('style','fill:#fffaf0')
  svg.append(backRect)

  //
  let deltaX = (graphWidth-axisLengthX) / 2
  let deltaY = (graphHeight-axisLengthY) / 2 

  let xLine = document.createElementNS(xmlns,'line')
  xLine.setAttribute('x1',deltaX)
  xLine.setAttribute('y1',deltaY + axisLengthY)
  xLine.setAttribute('x2',deltaX + axisLengthX)
  xLine.setAttribute('y2',deltaY + axisLengthY)
  xLine.setAttribute("style","stroke-width:" + strokeWidth + ";stroke:" + axisColorX + ";")
  svg.appendChild(xLine);

  // y轴
  let yLine = document.createElementNS(xmlns,"line");
  yLine.setAttribute("x1",deltaX);
  yLine.setAttribute("y1",deltaY+axisLengthY);
  yLine.setAttribute("x2",deltaX);
  yLine.setAttribute("y2",deltaY);
  yLine.setAttribute("style","stroke-width:" + strokeWidth + ";stroke:" + axisColorY + ";");
  svg.appendChild(yLine);

  var xLineTri = document.createElementNS(xmlns,"polygon");
  var xLineTriPos = (deltaX + axisLengthX) + "," + (deltaY + axisLengthY - 5) + " " + (deltaX + axisLengthX + 15) + "," 
                    + (deltaY + axisLengthY) + " " + (deltaX + axisLengthX) + "," + (deltaY + axisLengthY + 5);
  xLineTri.setAttribute("points",xLineTriPos);
  xLineTri.setAttribute("style","fill:"+axisColorX);
  svg.appendChild(xLineTri);
  // y轴三角形
  var yLineTri = document.createElementNS(xmlns,"polygon");
  var yLineTriPos = (deltaX - 5) + "," + deltaY + " " + deltaX + "," 
                    + (deltaY - 15) + " " + (deltaX + 5) + "," + deltaY;
  yLineTri.setAttribute("points",yLineTriPos);
  yLineTri.setAttribute("style","fill:"+axisColorY);
  svg.appendChild(yLineTri);

  for(let i=0;i<colHeight.length;i++){
      let col = document.createElementNS(xmlns,'rect')
      col.setAttribute('x',deltaX + spaceWidth*(i+1) + colWidth*i)
      col.setAttribute("y",deltaY+axisLengthY-colHeight[i])
      col.setAttribute("width",colWidth);
      col.setAttribute("height",colHeight[i]);
      col.setAttribute("style","fill:"+colColor[i]+";");
      svg.appendChild(col);
  }


}